<template>
	<view class="p-x-30 p-y-20">
		<u-gap height="10"></u-gap>
		<view class="works">
			<view class="title">日常使用</view>
			<view class="works-list">
				<view class="work" v-for="item in normalList" :key="item.name" @click="pathHandler(item)">
					<u-badge :isDot="item.dot" type="error" :absolute="true" :offset="[6, 0]"></u-badge>
					<image :src="item.src"></image>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="works" v-if="$hasPermission('sys:trouble:approver')">
			<view class="title">审批管理</view>
			<view class="works-list">
				<view class="work" v-for="item in auditList" :key="item.name" @click="pathHandler(item)">
					<u-badge :isDot="item.dot" type="error" :absolute="true" :offset="[6, 0]"></u-badge>
					<image :src="item.src"></image>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import SetTabBar from '@/mixins/SetTabBar.js'
	export default {
		mixins: [SetTabBar],
		onShow() {
			// #ifdef MP-WEIXIN
			this.setTabBarIndex(2);
			// #endif
			
		},
		data() {
			return {
				userType:uni.getStorageSync('userType'),
				normalList: [{
						name: '设备电量',
						path: '/pages/om/om',
						src: require('@/static/works/electric.png')
					},
					{
						name: '送检台账',
						path: '/pages/check/check',
						src: require('@/static/works/check.png')
					},
					{
						name: '故障申报',
						path: '/pages/malfunction/malfunction',
						src: require('@/static/works/malfunction.png')
					},
				],
				auditList: [{
						name: '故障审批',
						path: '/pages/malfunctionAudit/malfunctionAudit',
						src: require('@/static/works/mal-audit.png')
					},
					{
						name: '出入库审批',
						path: '/pages/audit/audit',
						src: require('@/static/works/ware-audit.png')
					},
				]
			}
		},
		methods: {
			pathHandler(item) {
				uni.navigateTo({
					url: item.path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.works {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 30rpx;

		.title {
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
			line-height: 44rpx;
		}
	}

	.works-list {
		display: flex;

		image {
			width: 122rpx;
			height: 122rpx;
		}

		view {
			font-weight: 500;
			color: #333333;
			font-size: 24rpx;
		}
	}

	.work {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 40rpx;
		position: relative;
	}
</style>